<style scoped lang="less">
  .subject-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .subject-add {
    height: 100px;
    width: 100px;
    display: flex;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-left: 5px;
    border: #f0f0f0 1px solid;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 500ms ease;
  }

  .subject-add:hover {
    background-color: #c8dbef;
  }

  .subject-item {
    justify-content: center;
    width: 320px;
    display: flex;
    margin: 0 5px;
    flex-direction: column;
  }
  .subject-img {
    width: 300px;
    height: 100px;
  }
  .subject-title {
    text-align: center;
  }
  .subject-item-op-wrap{
    display: flex;
	  width: 100%;
    justify-content: space-around;
  }
  .subject-item-op{
    cursor: pointer;
  }
	.select{
		cursor: pointer;
	}
</style>
<template>
  <Card>
    <div class="subject-wrap">
      <div @click="selected(index)" :class="select?'select':''" class="subject-item" v-for="(item,index) in data">
        <img class="subject-img" :src="item.banner!=null?GLOBAL.getUrl(item.banner[0]):''">
        <div class="subject-title">{{item.title}}</div>
        <div class="subject-item-op-wrap">
          <span class="subject-item-op del">
            <Icon class="subject-item-op del" @click="del(index)" type="md-close-circle" />
          </span>
          <span >
            <Icon class="subject-item-op edit" @click="toEdit(index)" type="ios-create" />
          </span>
	        <span >
            <Icon class="subject-item-op edit" @click="toBoundList(index)" type="ios-settings" />
          </span>
        </div>
      </div>
      <div class="subject-add" @click="toAdd">添加专题</div>
    </div>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}">
      <Form ref="addForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="名称" prop="title">
          <Input v-model="formItem.title" placeholder="请输入名称"
                 style="width:180px"/>
        </FormItem>
        <FormItem label="图片" >
          <SelectImg v-model="formItem.banner" @on-selected-imgs="imgSelected" :canOp="true"
                     :limit="1"
                     :initList="formItem.banner"></SelectImg>
        </FormItem>
        <FormItem label="商品排序">
          <RadioGroup v-model="formItem.sort">
            <Radio :label="0">按发布时间</Radio>
            <Radio :label="1">按销量</Radio>
            <Radio :label="2">按价格</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="add" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
  import SelectImg from '../../components/select-img'
  import {getList, save,del} from '@/api/subject'

  export default {
    name: 'subject_list',
    components: {
      SelectImg
    },
	  props:{
      select:{type:Boolean,default:false}//是否是选择专题
	  },
    data() {
      return {
        modalSetting: {
          show: false,
          loading: false
        },
        formItem: {
          banner: null,
          title: null,
          sort: 0,
          id: null
        },
        data: [],
        ruleValidate: {
          title: [
            {required: true, message: '标题不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      selected(index){
        let data = this.data[index];
        if(this.select){
          this.$emit("subject-selected",{active_type:this.GLOBAL.TYPE_LINK_SUBJECT,value:data.id,img:[data.banner[0]],title:data.title});
        }
      },
      imgSelected(imgs) {
        this.formItem.banner = imgs;
      },
      cancel() {
        this.modalSetting.show = false;
      },
      toAdd() {
        this.formItem = {
          banner: [],
          title: null,
          sort: 0,
          id: null
        };
        this.modalSetting.show = true;

      },
      toBoundList(index){
        this.$router.push({name:'active_subject_bound_list',params:{sub_id:this.data[index].id}});
      },
      toEdit(index) {
        this.formItem = this.data[index];
        this.modalSetting.show = true;
      },
      del(index) {
        let vm = this;
        this.$Modal.confirm({
          title: '确认删除吗？',
          content: '您确认要删除此分类吗？',
          onOk: () => {
            let id = this.data[index].id;
            del(id).then(rep=>{
              vm.$Message.success('删除成功');
              vm.getList();
            });
          },
          onCancel: () => {
          }
        });
      },
      add() {
        let vm = this;
        vm.$refs['addForm'].validate((valid) => {
            if (valid) {
              let params = {title: vm.formItem.title, banner: JSON.stringify(vm.formItem.banner), id: vm.formItem.id,sort:vm.formItem.sort};
              save(params).then(rep => {
                vm.modalSetting.show = false;
                vm.getList();
              });
            }
          }
        );
      },
      getList() {
        let vm = this;
        getList().then(response => {
          response.data.data.forEach(v => {
            v.banner = JSON.parse(v.banner);
          });
          vm.data = response.data.data;

        })
      }
    }
  }
</script>
